<template>
    <div class="report-container">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>生成报告</span>
                </div>
            </template>
            <el-form :model="form" label-width="120px">
                <el-form-item label="报告标题">
                    <el-input v-model="form.title" placeholder="请输入报告标题" />
                </el-form-item>
                <el-form-item label="报告内容">
                    <el-input v-model="form.content" type="textarea" :rows="6" placeholder="请输入报告内容" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="generateReport">生成报告</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 报告预览弹窗 -->
        <el-dialog v-model="dialogVisible" title="报告预览" width="90%" :before-close="handleClose">
            <div v-html="reportContent"></div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">关闭</el-button>
                    <el-button type="primary" @click="dialogVisible = false">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const form = ref({
    title: '',
    content: ''
})

const dialogVisible = ref(false)
const reportContent = ref('')

const generateReport = () => {
    if (!form.value.title || !form.value.content) {
        ElMessage.warning('请填写完整的报告信息')
        return
    }
    // 设置报告内容
    reportContent.value = `<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>${form.value.title}</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .section-title {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        .section-title .number {
            width: 24px;
            height: 24px;
            background: #FFB800;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            font-weight: bold;
        }
        .section-title h2 {
            margin: 0;
            font-size: 18px;
        }
        .data-card {
            background: #FFF5F5;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
        }
        .data-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }
        .data-item {
            flex: 1;
        }
        .data-label {
            font-size: 14px;
            color: #333;
            margin-bottom: 5px;
        }
        .data-value {
            font-size: 24px;
            color: #FF6B6B;
            font-weight: bold;
        }
        .data-trend {
            font-size: 14px;
            color: #FF6B6B;
        }
        .source-row {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }
        .source-item {
            text-align: center;
            flex: 1;
        }
        .source-value {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .source-label {
            font-size: 12px;
            color: #666;
        }
        .conversion-card {
            background: #FFF9F0;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
        }
        .conversion-stats {
            display: flex;
            gap: 15px;
            margin-bottom: 15px;
        }
        .conversion-item {
            flex: 1;
            text-align: center;
            padding: 10px;
            background: white;
            border-radius: 6px;
        }
        .data-analysis {
            margin-top: 20px;
            padding: 15px;
            background: #F8F9FA;
            border-radius: 8px;
        }
        .analysis-item {
            color: #FF4D4F;
            margin-bottom: 10px;
            font-size: 14px;
        }
        .highlight {
            color: #FF4D4F;
            font-weight: bold;
        }
        .store-analysis {
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        .store-stats {
            display: flex;
            gap: 20px;
            margin-bottom: 15px;
        }
        .stat-box {
            flex: 1;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
            text-align: center;
        }
        .merchant-discount {
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
            margin-top: 15px;
        }
        .product-analysis {
            background: #fff;
            padding: 20px;
            border-radius: 8px;
        }
        .product-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        .product-item {
            display: flex;
            gap: 15px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
        }
        .product-img {
            width: 80px;
            height: 80px;
            border-radius: 4px;
            object-fit: cover;
        }
        .product-info {
            flex: 1;
        }
        .product-name {
            font-size: 16px;
            margin-bottom: 5px;
        }
        .product-price {
            color: #ff6b6b;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .product-stats {
            display: flex;
            gap: 20px;
        }
        .stat {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .stat .label {
            font-size: 12px;
            color: #666;
        }
        .stat .value {
            font-size: 16px;
            font-weight: bold;
        }
        .highlight-orange {
            color: #ff6b6b;
        }
        .update-time {
            font-size: 12px;
            color: #666;
            margin-left: auto;
        }
        .score-card {
            background: #FFF9F0;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .total-score {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        .score-value {
            font-size: 36px;
            font-weight: bold;
            color: #FF6B6B;
            margin: 0 20px;
        }
        .medal-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .medal-icon {
            width: 24px;
            height: 24px;
        }
        .score-details {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }
        .operation-advice {
            background: #fff;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        .advice-text {
            font-size: 14px;
            line-height: 1.6;
            color: #666;
            margin-bottom: 10px;
        }
        .pending-tasks {
            background: #fff;
            padding: 15px;
            border-radius: 8px;
        }
        .task-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        .marketing-card, .service-card {
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .live-stats {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        .stat-group {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
        }
        .competition-range {
            margin-top: 15px;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 4px;
            font-size: 14px;
            color: #666;
        }
        .service-stats {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        .star-rating-card {
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .rating-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }
        .rating-item {
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
        }
        .rating-item h3 {
            margin: 0 0 15px 0;
            font-size: 16px;
            color: #333;
        }
        .rating-content {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .rating-value {
            font-size: 24px;
            font-weight: bold;
            color: #333;
        }
        .rating-status {
            color: #666;
            font-size: 14px;
        }
        .rating-change {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 16px;
        }
        .from-value {
            color: #666;
        }
        .to-value {
            color: #333;
        }
        .change-value {
            font-size: 14px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="section-title">
            <div class="number">1</div>
            <h2>访问转化</h2>
        </div>

        <div class="data-card">
            <h3>发现门店</h3>
            <div class="data-row">
                <div class="data-item">
                    <div class="data-label">曝光人数</div>
                    <div class="data-value">4.25万</div>
                    <div class="data-trend">环比 2262.19%</div>
                </div>
                <div class="data-item">
                    <div class="data-label">竞争圈排名</div>
                    <div class="data-value">20%-30%</div>
                    <div class="data-trend">同品类竞争圈环比 24.57%</div>
                </div>
            </div>
            <div class="source-row">
                <div class="source-item">
                    <div class="source-value">3,075</div>
                    <div class="source-label">搜索来源</div>
                </div>
                <div class="source-item">
                    <div class="source-value">301</div>
                    <div class="source-label">频道页来源</div>
                </div>
                <div class="source-item">
                    <div class="source-value">4</div>
                    <div class="source-label">信息流来源</div>
                </div>
            </div>
        </div>

        <div class="data-card">
            <h3>浏览门店</h3>
            <div class="data-row">
                <div class="data-item">
                    <div class="data-label">访问人数</div>
                    <div class="data-value">736</div>
                    <div class="data-trend">环比 221.40%</div>
                </div>
                <div class="data-item">
                    <div class="data-label">竞争圈排名</div>
                    <div class="data-value">30%-50%</div>
                    <div class="data-trend">同品类竞争圈环比 10.17%</div>
                </div>
            </div>
            <div class="source-row">
                <div class="source-item">
                    <div class="source-value">245</div>
                    <div class="source-label">搜索来源</div>
                </div>
                <div class="source-item">
                    <div class="source-value">18</div>
                    <div class="source-label">频道页来源</div>
                </div>
                <div class="source-item">
                    <div class="source-value">84</div>
                    <div class="source-label">信息流来源</div>
                </div>
            </div>
            <div class="source-row">
                <div class="source-item">
                    <div class="source-value">65</div>
                    <div class="source-label">商品点击</div>
                </div>
                <div class="source-item">
                    <div class="source-value">44</div>
                    <div class="source-label">评价点击</div>
                </div>
                <div class="source-item">
                    <div class="source-value">19</div>
                    <div class="source-label">电话点击</div>
                </div>
            </div>
        </div>

        <div class="conversion-card">
            <h3>意向转化</h3>
            <div class="data-row">
                <div class="data-item">
                    <div class="data-label">转化人数</div>
                    <div class="data-value">43</div>
                    <div class="data-trend">环比 186.67%</div>
                </div>
                <div class="data-item">
                    <div class="data-label">竞争圈排名</div>
                    <div class="data-value">30%-50%</div>
                    <div class="data-trend">同品类竞争圈环比 17.03%</div>
                </div>
            </div>
            <div class="conversion-stats">
                <div class="conversion-item">
                    <div class="source-value">23</div>
                    <div class="source-label">下单人数</div>
                </div>
                <div class="conversion-item">
                    <div class="source-value">21</div>
                    <div class="source-label">预约人数</div>
                </div>
            </div>
            <h3>转化率</h3>
            <div class="data-row">
                <div class="data-item">
                    <div class="data-label">访问转化率</div>
                    <div class="data-value">5.84%</div>
                </div>
                <div class="data-item">
                    <div class="data-label">曝光访问转化率</div>
                    <div class="data-value">1.73%</div>
                </div>
            </div>
        </div>

        <div class="data-analysis">
            <div class="analysis-item">
                <span class="highlight">异常上升</span> 04月02日核销售价金额202，比03月01日至04月07日均值19高183(+981.13%)。
            </div>
            <div class="analysis-item">
                <span class="highlight">异常上升</span> 04月02日下单售价金额202，比03月01日至04月07日均值19高183(+979.61%)。
            </div>
            <div class="analysis-item">
                <span class="highlight">异常上升</span> 04月02日曝光人数6,351，比03月01日至04月07日均值1,120高5,231(+467.28%)。
            </div>
            <div class="analysis-item">
                <span class="highlight">主要原因</span> 转化人数从15上升到43，环比186.67%；其中搜索号码7转化人数上升4，贡献率26.65%，主要由于曝光人数从1,357到3,075，曝光访问转化率从14.15%到7.97%。
            </div>
        </div>

        <div class="section-title">
            <div class="number">2</div>
            <h2>交易分析</h2>
        </div>

        <div class="store-analysis">
            <h3>门店分析</h3>
            <div class="store-stats">
                <div class="stat-box">
                    <div class="stat-label">下单券数</div>
                    <div class="stat-value">23</div>
                </div>
                <div class="stat-box">
                    <div class="stat-label">下单售价金额</div>
                    <div class="stat-value">¥711</div>
                </div>
                <div class="stat-box">
                    <div class="stat-label">核销券数</div>
                    <div class="stat-value">22</div>
                </div>
            </div>
            <div class="merchant-discount">
                <div class="stat-label">商家优惠后核销额</div>
                <div class="stat-value">¥710</div>
            </div>
        </div>

        <div class="product-analysis">
            <h3>商品分析</h3>
            <div class="product-list">
                <div class="product-item">
                    <div class="product-info">
                        <div class="product-name">EVER LOVE盟约之爱奎金感婚礼</div>
                        <div class="product-price">¥1.8万</div>
                        <div class="product-stats">
                            <div class="stat">
                                <span class="label">访问人数</span>
                                <span class="value highlight-orange">15</span>
                            </div>
                            <div class="stat">
                                <span class="label">下单券数</span>
                                <span class="value">0</span>
                            </div>
                            <div class="stat">
                                <span class="label">核销券数</span>
                                <span class="value">0</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="product-item">
                    <div class="product-info">
                        <div class="product-name">代金券</div>
                        <div class="product-price">¥9.9</div>
                        <div class="product-stats">
                            <div class="stat">
                                <span class="label">访问人数</span>
                                <span class="value highlight-orange">3</span>
                            </div>
                            <div class="stat">
                                <span class="label">下单券数</span>
                                <span class="value">0</span>
                            </div>
                            <div class="stat">
                                <span class="label">核销券数</span>
                                <span class="value">0</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="product-item">
                    <div class="product-info">
                        <div class="product-name">EVER LOVE明星布置创意策划摄影</div>
                        <div class="product-price">¥99</div>
                        <div class="product-stats">
                            <div class="stat">
                                <span class="label">访问人数</span>
                                <span class="value">0</span>
                            </div>
                            <div class="stat">
                                <span class="label">下单券数</span>
                                <span class="value highlight-orange">5</span>
                            </div>
                            <div class="stat">
                                <span class="label">核销券数</span>
                                <span class="value highlight-orange">5</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="product-item">
                    <div class="product-info">
                        <div class="product-name">EVER LOVE 「恒爱求婚策划</div>
                        <div class="product-price">¥1</div>
                        <div class="product-stats">
                            <div class="stat">
                                <span class="label">访问人数</span>
                                <span class="value">0</span>
                            </div>
                            <div class="stat">
                                <span class="label">下单券数</span>
                                <span class="value highlight-orange">16</span>
                            </div>
                            <div class="stat">
                                <span class="label">核销券数</span>
                                <span class="value highlight-orange">15</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="product-item">
                    <div class="product-info">
                        <div class="product-name">EVER LOVE至白教堂西式婚礼</div>
                        <div class="product-price">¥9,999</div>
                        <div class="product-stats">
                            <div class="stat">
                                <span class="label">访问人数</span>
                                <span class="value">0</span>
                            </div>
                            <div class="stat">
                                <span class="label">下单券数</span>
                                <span class="value">0</span>
                            </div>
                            <div class="stat">
                                <span class="label">核销券数</span>
                                <span class="value">0</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="section-title">
            <div class="number">3</div>
            <h2>经营评分</h2>
            <div class="update-time">数据更新于2025-04-07</div>
        </div>

        <div class="score-card">
            <div class="total-score">
                <div class="score-label">当前得分</div>
                <div class="score-value">79</div>
                <div class="medal-info">
                    <span>已获等级</span>
                    <span class="medal-text">银牌</span>
                </div>
            </div>

            <div class="score-details">
                <div class="score-item">
                    <div class="item-label">基础信息</div>
                    <div class="item-value highlight-orange">3/3分</div>
                </div>
                <div class="score-item">
                    <div class="item-label">商品丰富度</div>
                    <div class="item-value highlight-orange">35/35分</div>
                </div>
                <div class="score-item">
                    <div class="item-label">服务质量</div>
                    <div class="item-value highlight-orange">35/40分</div>
                </div>
                <div class="score-item">
                    <div class="item-label">效果表现</div>
                    <div class="item-value highlight-orange">6/22分</div>
                </div>
            </div>

            <div class="operation-advice">
                <h3>运营建议</h3>
                <p class="advice-text">线上运营的服务质量主要体现在店铺评价和诚信经营上。对进店消费者提供优质服务从而获得真实有效的评价（3图+15字）可以提高店铺的曝光和转化。面对差评可以通过开店宝后台及时回复，店家回复内容也会作为消费者理性判断的依据。另外，平台针对虚假交易、刷单套刑、违单（不接待）、虚假评价等违规操作会进行持续的监控，建议勿犯有保率心理引起不必要的处罚。</p>
                <p class="advice-text">线上经营是根据商户在同城的访问排名和交易排名表现获得的得分，得名越高得分越高，该板块需在【基础信息】和【商品丰富度】能得到满分的基础上进行长期经营，建议参与平台营销活动并合理使用优惠码进行店转来获得更多的曝光和转化。</p>
            </div>

            <div class="pending-tasks">
                <h3>待完成任务</h3>
                <div class="task-item">
                    <div class="task-label">近30天新增达标笔记数</div>
                    <div class="task-value highlight-orange">3/5分</div>
                </div>
                <div class="task-item">
                    <div class="task-label">近60天新增评价分分</div>
                    <div class="task-value highlight-orange">7/10分</div>
                </div>
                <div class="task-item">
                    <div class="task-label">近30天同城同二级品类营业额排名</div>
                    <div class="task-value highlight-orange">6/22分</div>
                </div>
            </div>
        </div>

        <div class="section-title">
            <div class="number">4</div>
            <h2>营销参与度</h2>
        </div>

        <div class="marketing-card">
            <h3>直播情况</h3>
            <div class="live-stats">
                <div class="stat-group">
                    <div class="stat-item">
                        <div class="stat-label">直播场次数</div>
                        <div class="stat-value highlight-orange">0</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-label">同品类同竞争圈均值</div>
                        <div class="stat-value">0.00</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-label">同竞争圈Top值</div>
                        <div class="stat-value">0</div>
                    </div>
                </div>

                <div class="stat-group">
                    <div class="stat-item">
                        <div class="stat-label">直播时长</div>
                        <div class="stat-value highlight-orange">0m</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-label">同品类同竞争圈均值</div>
                        <div class="stat-value">0m</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-label">同竞争圈Top值</div>
                        <div class="stat-value">0m</div>
                    </div>
                </div>

                <div class="stat-group">
                    <div class="stat-item">
                        <div class="stat-label">直播实付GTV</div>
                        <div class="stat-value highlight-orange">¥0</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-label">同品类同竞争圈均值</div>
                        <div class="stat-value">¥0</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-label">同竞争圈Top值</div>
                        <div class="stat-value">¥0</div>
                    </div>
                </div>
            </div>
            <div class="competition-range">竞争圈范围：未知竞争圈信息</div>
        </div>

        <div class="section-title">
            <div class="number">5</div>
            <h2>服务评价</h2>
        </div>

        <div class="service-card">
            <div class="service-stats">
                <div class="stat-group">
                    <div class="stat-item">
                        <div class="stat-label">新增评价数</div>
                        <div class="stat-value">20</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-label">累计评价数</div>
                        <div class="stat-value">34</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-label">新增好评数</div>
                        <div class="stat-value">20</div>
                    </div>
                </div>
                <div class="stat-group">
                    <div class="stat-item">
                        <div class="stat-label">好评率</div>
                        <div class="stat-value">100.00000%</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-label">新增差评数</div>
                        <div class="stat-value">0</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-label">新增差评回复率</div>
                        <div class="stat-value">0.00000%</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="section-title">
            <div class="number">6</div>
            <h2>星级变化</h2>
        </div>

        <div class="star-rating-card">
            <div class="rating-container">
                <div class="rating-item">
                    <h3>点评星级</h3>
                    <div class="rating-content">
                        <div class="rating-value">4.4</div>
                        <div class="rating-status">未发生改变</div>
                    </div>
                </div>

                <div class="rating-item">
                    <h3>美团星级</h3>
                    <div class="rating-content">
                        <div class="rating-change">
                            <span class="from-value">从 4.0</span>
                            <span class="to-value">至 <span class="highlight-orange">4.1</span></span>
                        </div>
                        <div class="change-value">
                            上涨 <span class="highlight-orange">0.1</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>`
    dialogVisible.value = true
}

const handleClose = (done: () => void) => {
    ElMessageBox.confirm('确认关闭？')
        .then(() => {
            done()
        })
        .catch(() => { })
}
</script>

<style scoped>
.report-container {
    padding: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
</style>